@extends('layouts.app')

@section('title', '邀请已过期')

@section('content')
    <div class="">
        <div class="page-header expired">
            <div class="page-icon">⏰</div>
            <h2 class="page-title">邀请已过期</h2>
        </div>

        <div class="invite-content">
            <div class="expired-message">
                <p>很抱歉，这个邀请链接已经过期或已被使用。</p>

                @if($invitation->book)
                    <div class="book-info">
                        <h4>账本信息</h4>
                        <p><strong>账本名称：</strong>{{ $invitation->book->name }}</p>
                        @if($invitation->book->description)
                            <p><strong>账本描述：</strong>{{ $invitation->book->description }}</p>
                        @endif
                    </div>
                @endif

                <div class="expired-details">
                    @if($invitation->is_used)
                        <p class="status-text used">✓ 此邀请已被使用</p>
                        @if($invitation->used_at)
                            @php
                                $usedAt = $invitation->used_at;
                                $now = \Carbon\Carbon::now();
                                $diffHours = $usedAt->diffInHours($now);
                            @endphp
                            <p class="time-text">
                                使用时间：{{ $usedAt->format('Y-m-d H:i:s') }}<br />
                                @if($diffHours < 24)
                                    ({{ round($diffHours, 1) }}小时前)
                                @else
                                    ({{ $usedAt->diffInDays($now) }}天前)
                                @endif
                            </p>
                        @endif
                    @else
                        <p class="status-text expired">✗ 此邀请已过期</p>
                        @php
                            $expiresAt = $invitation->expires_at;
                            $now = \Carbon\Carbon::now();
                            $diffHours = $expiresAt->diffInHours($now);
                        @endphp
                        <p class="time-text">
                            过期时间：{{ $expiresAt->format('Y-m-d H:i:s') }}<br />
                            @if($diffHours < 24)
                                ({{ round($diffHours, 1) }}小时前)
                            @else
                                ({{ $expiresAt->diffInDays($now) }}天前过期)
                            @endif
                        </p>
                    @endif
                </div>
            </div>
        </div>

        <div class="invite-actions">
            <p class="help-text">如需加入此账本，请联系账本管理员重新发送邀请。</p>

            @auth
                <a href="{{ route('user.books') }}" class="btn btn-primary btn-lg">返回我的账本</a>
            @else
                <a href="{{ route('login') }}" class="btn btn-primary btn-lg">登录</a>
                <a href="{{ route('register') }}" class="btn btn-info btn-lg">注册</a>
            @endauth

            <button type="button" class="btn btn-outline btn-lg" onclick="window.history.back()">
                返回上页
            </button>
        </div>
    </div>
@endsection
@push('styles')
    <style>
        .app-container {
            padding-bottom: 0 !important;
        }
        .invite-card {
            background: white;
            /*border-radius: 20px;*/
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            max-width: 400px;
            width: 100%;
            overflow: hidden;
            animation: slideUp 0.5s ease-out;
        }

        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .invite-header {
            text-align: center;
            padding: 20px 20px 10px;
            color: white;
        }

        .invite-header.expired {
            background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
        }

        .invite-icon {
            font-size: 48px;
            margin-bottom: 10px;
        }

        .invite-title {
            margin: 0;
            font-size: 24px;
            font-weight: 600;
        }

        .invite-content {
            padding: 30px 20px 0px;
        }

        .expired-message {
            text-align: center;
        }

        .expired-message > p {
            color: #666;
            margin-bottom: 25px;
            line-height: 1.6;
        }

        .book-info {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 25px;
            text-align: left;
        }

        .book-info h4 {
            margin: 0 0 15px 0;
            color: #333;
            font-size: 16px;
        }

        .book-info p {
            margin: 8px 0;
            color: #555;
            font-size: 14px;
        }

        .expired-details {
            background: #fff3cd;
            border: 1px solid #ffeaa7;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 20px;
        }

        .status-text {
            font-weight: 600;
            margin: 0 0 8px 0;
        }

        .status-text.used {
            color: #28a745;
        }

        .status-text.expired {
            color: #dc3545;
        }

        .time-text {
            font-size: 14px;
            color: #666;
            margin: 0;
        }

        .invite-actions {
            padding: 0 20px 30px;
        }

        .help-text {
            text-align: center;
            color: #666;
            margin-bottom: 20px;
            font-size: 14px;
            line-height: 1.5;
        }

        .btn {
            width: 100%;
            padding: 12px;
            border: none;
            border-radius: 10px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-bottom: 10px;
            text-decoration: none;
            display: inline-block;
            text-align: center;
        }

        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        }

        .btn-outline {
            background: transparent;
            color: #666;
            border: 2px solid #ddd;
        }

        .btn-outline:hover {
            background: #f8f9fa;
            border-color: #ccc;
        }

        @media (max-width: 480px) {
            .invite-card {
                margin: 0;
            }
        }
    </style>
@endpush
